<!--
 * @Author: fisher
 * @Date: 2024-02-23 20:57:36
 * @LastEditors: fisher luthor-li@qq.com
 * @LastEditTime: 2024-09-06 15:06:42
 * @FilePath: \allfront\src\modules\cloud\instance\index.vue
 * @Description: 
-->
<template>
  <div class="moduleMain">
    <div class="operate">
      <el-input
        v-model="search"
        placeholder="请输入集群节点ip"
        class="input-with-select"
      >
        <template #append>
          <el-button :icon="Search" @click="searchInstance" />
        </template>
      </el-input>
      <el-button type="success" @click="startCluster" style="margin-left: auto"
        >重启节点</el-button
      >
      <el-button type="info" @click="stopCluster">下线节点</el-button>
      <!-- <el-button type="primary" @click="addInstance">新增实例</el-button> -->
      <!-- <el-button type="warning" @click="editInstance">修改实例</el-button> -->
      <el-button type="danger" @click="deleteCluster">删除节点</el-button>
    </div>
    <div class="table">
      <el-table
        stripe
        :data="tableData"
        style="width: 100%; height: calc(100% - 60px)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column property="host" label="节点ip" width="120" />
        <el-table-column property="port" label="节点端口" width="120" />
        <!-- <el-table-column property="projectId" label="ue工程id" width="300" /> -->
        <el-table-column label="设备状态" width="400">
          <template #default="scope">
            <div>
              <span>内存</span>
              <el-progress
                :percentage="
                  Math.ceil(
                    (scope.row.memoryUsage / scope.row.memoryTotal) * 100,
                  )
                "
                :color="customColors"
              />
            </div>
            <div>
              <span>显存</span>
              <el-progress
                :percentage="
                  Math.ceil((scope.row.gpuUsage / scope.row.gpuTotal) * 100)
                "
                :color="customColors"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="节点在线时长" width="200">
          <template #default="scope">
            <span>
              {{ formatSeconds(Math.ceil(scope.row.onlineTime / 1000)) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column property="onlineStatus" label="在线状态" width="100">
          <template #default="scope">
            <el-button type="info" v-show="!scope.row.onlineStatus">
              离线
            </el-button>
            <el-button
              style="margin-left: 0"
              type="success"
              title="点击查看连接信息"
              v-show="scope.row.onlineStatus"
              @click="showUeclientDialog(scope.row)"
            >
              在线
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          property="createdAt"
          label="创建时间"
          show-overflow-tooltip
          width="180"
        >
          <template #default="scope">
            {{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column label="进程管理">
          <template #default="scope">
            <el-button type="primary" @click="checkProcess(scope.row)">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="table_page"
        :current-page="pageNo"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- <InstanceDialog
      ref="instanceDialog"
      @updateList="updateList"
    ></InstanceDialog>
    <UeclientDialog
      ref="ueclientDialog"
      :ueclientData="ueclientData"
    ></UeclientDialog> -->
    <Process ref="process"></Process>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue';
import { ref, reactive, onMounted, watch } from 'vue';
import Process from './process.vue';
import { useAxios } from '@/hooks/useAxios';
import { useDeleteConfirmation } from '@/hooks/useDeleteConfirm';
import { storeToRefs } from 'pinia';
import { useUeinstance } from '@/store/ueinstance.js'; // 路径要指向你的 store 文件
import { formatSeconds } from '@/utils/index.js';
import dayjs from 'dayjs';
const { post } = useAxios();
const { deleteData } = useDeleteConfirmation();
const search = ref('');
const customColors = [
  { color: '#67C23A', percentage: 30 },
  { color: '#409EFF', percentage: 65 },
  { color: '#E6A23C', percentage: 80 },
  { color: '#F56C6C', percentage: 100 },
];

const searchInstance = () => {
  getData();
};
/**
 * @description: 删除实例数据
 * @return {*}
 */
const deleteCluster = () => {
  deleteData(selectData, data => {
    return post('/cluster/deleteCluster', {
      ids: data,
    }).then(() => {
      selectData.length = 0;
      getData();
    });
  });
};
/**
 * @description: 启动实例
 * @return {*}
 */
const startCluster = () => {
  if (!selectData.length) {
    ElNotification({
      title: 'Info',
      message: '请先选择实例，在进行操作！',
      type: 'info',
    });
    return;
  }
  post('/cluster/startCluster', {
    ids: selectData,
  }).then(res => {
    if (res?.status) {
      selectData.length = 0;
      // 更新数据
      getData();
    }
  });
};
const stopCluster = () => {
  if (!selectData.length) {
    ElNotification({
      title: 'Info',
      message: '请先选择实例，在进行操作！',
      type: 'info',
    });
    return;
  }
  post('/cluster/offlineCluster', {
    ids: selectData,
  }).then(res => {
    if (res?.status) {
      selectData.length = 0;
      // 更新数据
      getData();
    }
  });
};
/**
 * @description: 获取列表数据
 * @return {*}
 */
let tableData = reactive([]);
let selectData = reactive([]);
let total = ref(0);
let pageNo = ref(1);
let pageSize = ref(10);
onMounted(() => {
  getData();
});
const getData = () => {
  const data = {
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    search: search.value,
  };
  post('/cluster/getCluster', data).then(res => {
    if (res?.status) {
      // 先清空，后赋值,表格数据赋值
      tableData.length = 0;
      tableData.push(...res.data);
      total.value = res.page.total;
    }
  });
};
const handleSelectionChange = val => {
  if (val.length) {
    selectData.length = 0;
    val.forEach(item => {
      selectData.push(item.id);
    });
  }
};
const handleSizeChange = val => {
  pageSize.value = val;
  getData();
};
const handleCurrentChange = val => {
  pageNo.value = val;
  getData();
};

const ueinstanceStore = useUeinstance();
const { connectChange } = storeToRefs(ueinstanceStore);
watch(connectChange, val => {
  if (val) {
    getData();
    ueinstanceStore.updataconnectChange(false);
  }
});
// ue连接客户端弹窗
const ueclientDialog = ref();
const ueclientData = reactive({});
const showUeclientDialog = data => {
  ueclientDialog.value.dialogFormVisible = true;
  Object.assign(ueclientData, data);
  ueclientDialog.value.handleData();
};
const process = ref();
const checkProcess = data => {
  process.value.getProcess(data.id);
  process.value.dialogFormVisible = true;
};
</script>
<style scoped>
.moduleMain {
  padding: 20px;
  box-sizing: border-box;
}

.operate {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  /* justify-content: flex-end; */
}
.input-with-select {
  width: 200px;
  height: 38px;
}
.table {
  height: calc(100% - 100px);
}
/* :deep(.el-table) {
    height: calc(100% -60px);
  } */
.table_page {
  height: 60px;
  justify-content: flex-end;
}
</style>
